import { useEffect, useRef } from 'react';
import _ from 'lodash';
import { Carousel } from 'antd';
import styles from '@/pages/main/index.less';
import echarts from 'echarts';
import Block from '@/pages/main/components/Block';

const scaleBase = window.scaleBase;
const colorMap = ['#0066ff', '#20F1DB', '#ffb325', '#F15151', '#4656bf' ];

const LeftBottom = props => {
  const { data } = props;
  const chart = useRef();

  const dataMap = _.countBy(data, t => t.type);
  const seriesData = _.map(dataMap, (value, name) => ({name, value}));

  const renderChart = () => {
    const option = {
      series: [
        {
          type: 'pie',
          radius: ['50%', '70%'],
          label: {
            fontSize: 12 * scaleBase,
            formatter: '{b}({c})',
          },
          labelLine: {
            lineStyle: {
              width: scaleBase,
            }
          },
          itemStyle: {
            // color: ({dataIndex}) => {
            //   return new echarts.graphic.LinearGradient(
            //     0, 0, 1, 0,
            //     [
            //       {offset: 0, color: getColor(colorMap[dataIndex], 0.5)},
            //       {offset: 1, color: colorMap[dataIndex]}
            //     ]
            //   )
            // },
            color: ({dataIndex}) => colorMap[dataIndex],
            shadowBlur: 200,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          },
          data: seriesData,
        }
      ]
    };
    chart.current.setOption(option);
  }
  const renderCarousel = () => {
    return data?.length > 6 ? <Carousel
      autoplay
      dotPosition={'right'}
      pauseOnHover={false}
      dots={false}
      slidesToShow={6}
    >
      {
        data?.map(({ id, car, type }) => (
          <div key={id} className={styles.leftBottomCarouselItem}>
            {car}{type}
          </div>
        ))
      }
    </Carousel> : <div>
      {
        data?.map(({ id, car, type }) => (
          <div className={'slick-slide'} key={id} >
            <div className={styles.leftBottomCarouselItemLess}>
              {car}{type}
            </div>
          </div>
        ))
      }
    </div>
  }
  const renderBody = () => {
    return <div className={styles.leftBottomChartWrapper}>
      <div className={styles.leftBottomChart}>
        <div id={'left-bottom-chart'}/>
      </div>
      <div className={styles.leftBottomCarousel}>
        <div>
          {renderCarousel()}
        </div>
      </div>
    </div>
  }
  useEffect(()=> {
    chart.current = echarts.init(document.getElementById('left-bottom-chart'));
  }, []);

  useEffect(()=> {
    data && renderChart();
  });

  return <Block
    containerClassName={styles.bottom}
    title={'车辆报警情况'}
    body={renderBody()}
  />
}

export default LeftBottom;
